import { Kwidget } from "../kWidget";
import { ParseHtml } from "../utils/base";

export class Kswitch extends Kwidget {

    constructor() {
        super();
        const shadowRoot = this.initShadow();
        this.ks = shadowRoot.querySelector(".k-switch");
    }

    static get observeChangedCallback() {
        return ["value"];
    }

    connectedCallback() {
        this.logInfo('k-switch');
    }

    attributeChangedCallback(name, oldVal, newVal) {
        switch (name) {
            case "value":
                this.valueHandle(newVal);
                break;
            default:
                break;
        }
    }

    get value(){
        return this.getAttribute('value');
    }

    set value(value){
        this.setAttribute("value",value);
    }

    valueHandle(newVal) {
        console.log(newVal)
    }

    html() {
        return `
            <section class="k-switch">
                <span class="k-switch-item k-switch-item-active" value="${true}">开启</span>
                <span class="k-switch-item" value="${false}">关闭</span>
            </section>
        `;
    }

    css() {
        return `
            :host{
               width: 100%;
               height: var(--k-height);
               display: flex;
               justify-content: space-between;
               align-items: center;
               border: 1px solid var(--k-border-color);
               border-radius: var(--k-radius);
               font-size: var(--k-font-size);
               font-color: var(--k-font-color);
               padding: 1px;
            }
            .k-switch{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: var(--k-height);
            }
            .k-switch-item{
                height: var(--k-height);
                display: inline-block;
                flex: 1;
                line-height: var(--k-height);
                text-align: center;
                cursor: pointer;
            }
            .k-switch-item-active{
                background-color: var(--k-primary-color-100);
                border-radius: var(--k-radius);
                color: #fff;
            }
        `;
    }
}

Kwidget.defineCustomElement("k-switch", Kswitch);


const parseHtml = new ParseHtml(`
            <section class="k-switch">
                <span class="k-switch-item">开启</span>
                <span class="k-switch-item">禁用</span>
            </section>
        `);

const ast = parseHtml.parse();
        console.log(ast,'ast obj');